<template>
  <div class="login">
    <n-space justify="center" class="login-box">
      <div class="before" :class="isTop ? 'trans-before' : ''">
        <login-section @before="handleBefore"></login-section>
      </div>
      <div class="after" :class="isTop ? 'trans-after' : ''">
        <register-section @after="handleAfter"></register-section>
      </div>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from 'vue';
import RegisterSection from './components/RegisterSection.vue';
import LoginSection from './components/LoginSection.vue';

import { useRouter } from 'vue-router';
const router = useRouter();

//正反反转
const isTop = ref(false);
const z = computed(() => {
  return isTop.value ? -100 : 100;
});
function handleBefore() {
  if (!isTop.value) {
    isTop.value = true;
  }
}
function handleAfter() {
  if (isTop.value) {
    isTop.value = false;
  }
}
const boxWidth = ref('22vw');
// const boxHeight = computed(() => {
//   return Number(boxWidth.value.slice(0, -2)) * 1.2 + 'vw';
// });
const boxHeight = ref('56vh');
onMounted(() => {
  resize();
  window.onresize = () => {
    return (() => {
      resize();
    })();
  };
});
// 响应式 宽度
const resize = () => {
  boxWidth.value =
    document.body.clientWidth > 1080
      ? '22vw'
      : document.body.clientWidth > 650
      ? '45vw'
      : '80vw';
};
</script>

<style scoped lang="scss">
$box-height: v-bind(boxHeight);
$box-width: v-bind(boxWidth);

.login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0 auto;
  background-color: #91a8d0;
  // background: url('@assets/logo.png');
  // background-position: 55% 10%; /*这个是按从左往右，从上往下的百分比位置进行调整*/
  &-box {
    width: $box-width;
    height: $box-height;
    margin: 0 auto;
    margin-top: 18vh;
    //3d视角
    perspective: 800;
    -webkit-perspective: 800;
    box-sizing: border-box;
    > div {
      padding: 5%;
    }
  }
}
.before {
  z-index: v-bind(z);
  width: $box-width;
  height: $box-height;
  position: absolute;
  top: 20vh;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: 0.75s;
  border: 1px solid rgb(34, 146, 156);
  //bg
  border-radius: 5%;
  background-color: rgba(243, 250, 255, 0.9);
}
.after {
  width: $box-width;
  height: $box-height;
  position: absolute;
  top: 20vh;
  left: 0;
  transform: rotateY(-180deg);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: 0.75s;
  border: 1px solid rgb(30, 177, 214);
  border-radius: 0px;
  border-radius: 5%;
  background-color: rgba(243, 250, 255, 0.9);
}
.login-box .trans-before {
  transform: rotateY(180deg);
}
.login-box .trans-after {
  transform: rotateY(0deg);
}
</style>
